<template>
	<view>
		<navbar transparent :isFixed="false" titleColor="#000" :title="seeker.name"></navbar>
		<view class="content" v-if="qiuzhi && Object.keys(qiuzhi).length>0">
			<view class="jobPostings li" v-if="qiuzhi.id" @click="toDetail">
				<view class="name">
					{{qiuzhi.name}}
				</view>
				<view class="infor">
					{{qiuzhi.education}} | {{qiuzhi.workType}} | {{qiuzhi.workDanwei.includes('月')? '月':'日'}}薪
					{{qiuzhi.isMianyi==1? '面议': Math.floor(qiuzhi.workSalary)}}
				</view>
				<view class="school">
					<van-icon name="bookmark-o" color="#7BB9FF" size="29rpx" custom-style="margin-right:28rpx;" />
					{{qiuzhi.school}}-{{qiuzhi.major}}
				</view>
				<text class="text van-multi-ellipsis--l2">
					{{qiuzhi.cnt || ""}}
				</text>
				<view class="avatar">
					<img :src="baseImage + qiuzhi.avatar" alt="" class="img" v-if="qiuzhi.avatar" />
					<img :src="baseImage + usual.seekerAvatar2" mode="" class="img" v-else-if="qiuzhi.sex=='女'">
					<img :src="baseImage + usual.seekerAvatar1" mode="" class="img" v-else>
					<img :src="imgUrl + 'man.png'" alt="" class="icon" v-if="qiuzhi.sex=='男'" />
					<img :src="imgUrl + 'woman.png'" alt="" class="icon" v-else-if="qiuzhi.sex=='女'" />
				</view>
			</view>
			<view class="jobPostings" v-else>
				<view class="title">
					<view class="h3">
						岗位已关闭
					</view>
				</view>
			</view>
 
		</view>

		<scroll-view class="messageList" :style="{height:getMessageListHeight()}" @scrolltoupper="addInfo"
			scroll-with-animation :scroll-into-view="item" scroll-y="true">
			<template v-for="(item,index) in imList">
				<template v-if="getUser(item)">
					<view class="messageMe" v-if="item.aid==userInfo.aid" :key="'message'+item.id"
						:id="'message'+item.id">
						<view class="isRead" v-if="item.isRead==1">
							已读
						</view>
						<view class="isRead" v-else>
							未读
						</view>
						<view class="messageText" v-if="item.isInfo==0">
							<view class="p">
								{{item.cnt}}
							</view>
						</view>
						<view class="messageText" v-else>
							<view class="p" v-if="info['company'].name" user-select>
								联系人: {{info['company'].name}}<text class="blue"
									@click="copy(info['company'].name)">点击复制</text>
							</view>
							<view class="p" v-if="info['company'].tel" user-select>
								联系电话: {{info['company'].tel}}<text class="blue"
									@click="copy(info['company'].tel)">点击复制</text>
							</view>
							<view class="p" v-if="info['company'].wechat" user-select>
								微 信 号 ：{{info['company'].wechat}}<text class="blue"
									@click="copy(info['company'].wechat)">点击复制</text>
							</view>
						</view>
						<img :src="baseImage + userInfo.picdir" alt="" class="avatar" v-if="userInfo.picdir" />
						<img :src="baseImage + usual.companyLogo" alt=""
							class="avatar" v-else />
					</view>

					<view class="messageHe" v-else :key="'message'+item.id" :id="'message'+item.id">
						<img :src="baseImage + seeker.avatar" alt="" class="avatar" v-if="seeker.avatar" />
						<img :src="baseImage + usual.seekerAvatar2" alt="" class="avatar" v-else-if="seeker.sex=='女'" />
						<img :src="baseImage + usual.seekerAvatar1" alt="" class="avatar" v-else />
						<view class="messageText" v-if="item.isInfo==0">
							<view class="p">
								{{item.cnt}}
							</view>
						</view>
						<view class="messageText" v-else>
							<view class="p" v-if="info['seeker'].tel" user-select>
								联系电话: {{info['seeker'].tel}}<text class="blue"
									@click="copy(info['seeker'].tel)">点击复制</text>
							</view>
							<view class="p" v-if="info['seeker'].wechat" user-select>
								微 信 号 ：{{info['seeker'].wechat}}<text class="blue"
									@click="copy(info['seeker'].wechat)">点击复制</text>
							</view>
						</view>
						
					</view>
				</template>
			
			 <view class="prompt" v-else-if="item.isBaoxian!=1" :key="'message'+item.id" :id="'message'+item.id">
								<view class="span" style="margin: 0;">
									{{item.cnt}}
								</view>
			 </view>
				
				
			</template>
		</scroll-view>

		<view class="messageTemplate" :style="{bottom:(getSafeBottom==20? 0:getSafeBottom) + btnHeight+'px'}">
			<view class="listMT">
				<view class="ul">
					<view class="li" v-for="item in cataList" :key="item.id">
						<view class="p">{{item.sort}}</view>
						<view class="send" @click="sendMessage(item.sort)" v-if="qiuzhi.id">发送</view>
						<view class="send" v-else @click="sendMessageNot()">发送</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footerBox" id="footerBox">
			<view class="footerButton" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
				<!-- <view class="collection">
					<van-icon :name="'star'+(isCollection?'':'-o')" :color="isCollection?'#F7D367':'#9D9D9D'"
						size="42rpx" />
					<text class="span">收藏</text>
				</view> -->
				<view class="call" @click="toggleTel" v-if="getTel()!=0 && qiuzhi.id">{{getTel()?dist[getTel()]:""}}</view>
				<view class="overCall" @click="overMessage">结束会话</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		messageDetailCompany,
		applyTel,
		successTel
	} from "@/core/web-api/session.js"
	
	import {sessionCompany} from "@/core/web-api/qiyeduan.js"
	import {
		mapGetters,
		mapState
	} from "vuex"
	import {
		getData
	} from "@/core/web-api/common.js"
	import Navbar from "@/components/Navbar.vue"
	import socket from "@/core/socket.js"
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				bottomBtnHeight: uni.upx2px(90),
				btnHeight:uni.upx2px(100),
				hangye: "",
				gangwei: "",
				imList: [],
				info: {},
				seeker: {},
				qiuzhi:{},
				myInfo: {},
				cataList: [],
				dist: {
					1: "交换联系方式",
					2: "同意交换联系方式",
					3: "已发送联系方式",
					4: "已交换联系方式"
				},
				telType: false,
				item: "",
				id:"",
				ksource:"",
				sessId:""
			}
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:"/pages/web/rencaiDetail?id="+this.qiuzhi.id
				})
			},
			/**
			 * 结束对话
			 */
			overMessage(){
				uni.navigateBack()
			},
			
			addInfo(){},

			/**
			 * 发送消息
			 */
			sendMessage(text) {
				let roleType = "1"
				let isFirst = this.imList.length>0?"0":"1"
				socket.sendMessage(this.sessId, text, roleType ,isFirst);
			},
			
			sendMessageNot(){
				uni.showToast({
					title: "岗位已关闭",
					icon: "error"
				})
			},

			/**
			 * 申请交换联系方式
			 * @@param {type} type 0:未申请  1：已申请 2:已同意
			 */
			toggleTel() {
				let type = this.telType;
				if (!type) return;
				console.log(type)
				if (type == 3) return;
				if (type == 4) return;
				let promise = null;
				if (type == 1) {
					promise = applyTel({
						id: this.sessId
					})
				} else if (type == 2) {
					promise = successTel({
						id: this.sessId
					})
				}
				promise.then(res => {
					if (res.code == 20000) {
						this.getDetail();
					}
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				})
			},

			copy(text) {
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "success"
						})
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: "复制失败",
							icon: "none"
						})
					}
				})
			},
			/**
			 * 获取详情
			 */
			getDetail() {
				console.log("AAA:"+this.ksource);
				if(this.ksource=="message"){
				messageDetailCompany({
					id: this.id
				}).then(res => {
					if (res.code == 20000) {
						let {
							hangye,
							gangwei,
							imList,
							info,
							seeker,
							qiuzhi,
							sessId
						} = res.data
						this.hangye = hangye;
						this.gangwei = gangwei;
						this.imList = imList;
						this.info = info;
						this.seeker = seeker;
						this.qiuzhi=qiuzhi;
						this.sessId=sessId;
						this.$store.commit("setSessId",this.sessId)
						socket.sendMessage2(this.sessId)
					}
				})
				
				}else{
					sessionCompany({
						id: this.id
					}).then(res => {
						if (res.code == 20000) {
							let {
								hangye,
								gangwei,
								imList,
								info,
								seeker,
								qiuzhi,
								sessId
							} = res.data
							this.hangye = hangye;
							this.gangwei = gangwei;
							this.imList = imList;
							this.info = info;
							this.seeker = seeker;
							this.qiuzhi=qiuzhi;
						    this.sessId=sessId;
							this.$store.commit("setSessId",this.sessId)
							socket.sendMessage2(this.sessId)
						}
					})
					
				}
			},
			getUserInfo() {
				console.log(this.userInfo)
				if (Object.keys(this.userInfo).length > 0) return;
				this.$store.dispatch("getUserInfoAction");
			},

			getCataList() {
				getData({
					sortList: ["招聘对话"]
				}).then(res => {
					if (res.code == 20000) {
						this.cataList = res.data.list[0].list;
					}
				})
			},
			
			getInit(id,ksource){
				this.id = id;
				this.ksource = ksource;
				this.$store.commit("clearImList")
				this.getDetail();
				this.getCataList();
				this.getUserInfo();
				this.$nextTick(() => {
					setTimeout(() => {
						if (!this.imList || this.imList.length == 0) return;
						this.item = 'message' + this.imList[this.imList.length - 1].id
						console.log(this.item)
					}, 500)
				
				})
			},
			setSessId(){
				
			},
		},
		watch: {
			messageList: {
				immediate: true,
				deep: true,
				handler(list) {
					if (!list || list.length == 0) return;
					console.log(123,list)
					list[0]['isRead'] = 0
					this.imList.push(...list)
					console.log(this.imList)
					this.$store.commit("clearImList")
					this.$nextTick(() => {
						this.item = 'message' + list[list.length - 1].id
					})
					console.log(this.userInfo.aid,list.aid)
					if(this.userInfo.aid !=list[0].aid){
						//更新列表内所有isRead
						this.imList.forEach((item) => {
						    item.isRead = 1;
						});
					}
				}
			},
			isRead:{
				immediate: true,
				deep: true,
				handler(item) {
					console.log("检测到状态更改")
					if(item==1){
						this.imList.forEach((item) => {
						    item.isRead = 1;
						});
						this.$store.commit("clearIsRead")
					}
				}
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom', 'getPageHeight']),
			...mapState(['userInfo', 'messageList','isRead','imgUrl','baseImage','usual']),
			getMessageListHeight() {
				return function() {
					let height = this.getPageHeight - this.getNavbar - (this.getSafeBottom == 20 ? 0 : this
						.getSafeBottom) - uni.upx2px(830);
					console.log(height)
					return height + 'px'
				}
			},
			getUser() {
				return function(item) {
					return item.isBaoxian == 0 && item.isJiaohuan == 0
				}
			},

			/**
			 * 判断请求联系方式状态
			 * 
			 */
			getTel() {
				return function() {
					let list = this.imList;
					if (list.length == 0) {
						this.telType = false;
						return false;
					};
					let isJiaohuan = false;
					let isInfo = false;
					let aid = ""
					list.forEach(item => {
						if (item.isJiaohuan == 1) {
							aid = item.aid;
							isJiaohuan = true;
						}
						if (item.isInfo == 1) isInfo = true;
					})
					if (!isJiaohuan) {
						this.telType = 1;
						return 1;
					};
					if (isJiaohuan && aid != this.userInfo.aid && !isInfo) {
						this.telType = 2;
						return 2
					};
					if (isJiaohuan && aid == this.userInfo.aid && !isInfo) {
						this.telType = 3;
						return 3
					};
					if (isJiaohuan && isInfo) {
						this.telType = 4;
						return 4
					};
					this.telType = false;
					return false;
				}
			},

			/**
			 * 判断当前消息和上一条消息的isInfo是否为1
			 */
			// getInsurance(){
			// 	return function(item,index,type){
			// 		if(index==0)return false;
			// 		let list = this.imList;
			// 		let flag = [];
			// 		for(let i = list.length-1;i>0;i--){
			// 			if(flag.length==2) break;
			// 			if(list[i].isInfo==1){
			// 				flag.push(list[i])
			// 			}
			// 		}
			// 		if(type=='list'){
			// 			if(flag.length<2) return false;
			// 			if(item.id==flag[1].id)return true;
			// 			else return false;
			// 		}
			// 		return flag;
			// 	}
			// }
		},
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}
.li{
	
.name {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 34rpx;
	color: #000000;
	margin-left: 5rpx;
	margin-bottom: 20rpx;
}

.infor,
.school,
.text {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 26rpx;
	color: #666666;
}

.school {
	margin-bottom: 28rpx;
}

.infor {
	margin-bottom: 10rpx;

}

.avatar {
	position: absolute;
	top: 25rpx;
	right: 32rpx;
	width: 100rpx;
	height: 100rpx;
	background: #F9F9F9;
	border-radius: 50%;
	border: 2px solid #B5B5B5;
}

.avatar .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.avatar .icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: -10rpx;
	right: 5rpx;
}

.bottomLine {
	margin-top: 41rpx;
	text-align: center;
	position: relative;
	text-align: center;
	width: 100%;
}

.bottomLine .span {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 26rpx;
	position: relative;
	z-index: 80;
	color: #B9B9B9;
	padding: 0 10rpx;
	background: #F4F4F4;
}

.bottomLine::after {
	content: "";
	width: 366rpx;
	height: 1rpx;
	background: #B6B6B6;
	position: absolute;
	top: 65%;
	left: 50%;
	margin-left: -183rpx;
	z-index: 70;
}
}
	.top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content {
		width: 100%;
		position: relative;
		z-index: 99;
		padding: 30rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.headNav .blackBtn {
		position: absolute;
		left: 5rpx;
		top: 0;
	}

	.jobPostings {
		padding: 14rpx 28rpx 23rpx 14rpx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;
		margin-bottom: 33rpx;
	}

	.jobPostings .title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.jobPostings .h3 {
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 34rpx;
		color: #4E4D4D;
	}

	.jobPostings .span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 29rpx;
		color: #1684FC;
		padding-top: 8rpx;
	}

	.jobPostings .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #7F8080;
		padding-left: 5rpx;
		margin-bottom: 19rpx;
	}

	.cardList {
		width: 100%;
	}

	.card {
		background: #D0E0FD;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding: 7rpx 12rpx 9rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20rpx;
		color: #4E4D4D;
		margin-right: 23rpx;
	}

	.jobPostings .date {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #7F8080;
		position: absolute;
		bottom: 20rpx;
		right: 35rpx;
	}

	.prompt {
		width: 100%;
		text-align: center;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.prompt .span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #7F8080;
		margin-left: 14rpx;
	}

	.messageList {
		width: 100%;
		padding: 0 39rpx 0 45rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.messageHe,
	.messageMe {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.messageMe {
		justify-content: flex-end;
	}

	.avatar {
		width: 81rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 11rpx;
	}

	.messageText {
		max-width: 60%;
		padding: 13rpx 13rpx 14rpx 19rpx;
		box-sizing: border-box;
		margin-right: 12rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.messageText .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666767;
	}

	.messageText .p:first-child {
		margin-bottom: 7rpx;
	}

	.isRead {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20rpx;
		color: #7F8080;
		margin-right: 10upx;
	}

	.blue {
		color: #1684FC;
		margin-left: 15rpx;
	}

	.getInformationBtn {
		width: 100%;
		text-align: center;
		margin-top: 7rpx;
		margin-bottom: 7upx;
	}

	.getInformationBtn .yes,
	.getInformationBtn .no {
		width: 121rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 23rpx;
		color: #FFFFFF;
	}

	.getInformationBtn .yes {
		background: #96BCE4;
		margin-right: 15rpx;
	}

	.getInformationBtn .no {
		background: #B2B2B2;
	}

	.footerBox {
		width: 100%;
		background: #F5F5F5;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.messageTemplate {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		position: fixed;
		left: 0;
	}

	.listMT {
		width: 100%;
		background: #F9F9F9;
		box-shadow: 0rpx 12rpx 28rpx rgba(202, 206, 216, 0.35);
		border-radius: 10rpx;
		border: 1px solid #0180FF;
		padding: 35rpx 17rpx 35rpx 23rpx;
		box-sizing: border-box;
	}

	.listMT .ul {
		width: 100%;
		height: 260upx;
		overflow-y: auto;
		padding-right: 51rpx;
		box-sizing: border-box;
	}

	.listMT .ul::-webkit-scrollbar {
		width: 20rpx !important;
		background: #E4E5E6;
		border-radius: 10rpx;
	}

	.listMT .li {
		width: 100%;
		padding: 33rpx 24rpx 19rpx 19rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 22rpx;

	}

	.listMT .li .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		width: 70%;
		line-height: 45rpx;
		display: inline-block;
	}

	.listMT .li .send {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
	}

	.footerButton {
		width: 100%;
		overflow: hidden;
		background: #fff;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		view{
			flex:1;
		}
	}

	.collection {
		width: 20%;
		float: left;
		text-align: center;
	}

	.collection .span {
		width: 61rpx;
		height: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		line-height: 39rpx;
		margin-left: 18rpx;
	}

	.call,
	.overCall {
		text-align: center;
		background: #1684FC;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		float: left;
	}

	.overCall {
		background: #CBDFEA;
	}
</style>